<template>
  <div class="ticker-container">
    <h2 class="section-title">实时物流信息</h2>
    <div class="ticker-wrapper">
      <div class="ticker-content" :style="{ transform: `translateY(${-currentIndex * 60}px)` }">
        <div 
          v-for="(item, index) in displayedItems" 
          :key="index" 
          class="ticker-item"
        >
          <div class="item-header">
            <span class="item-id">{{ item.id }}</span>
            <span class="item-status" :class="item.status">{{ item.statusText }}</span>
          </div>
          <div class="item-details">
            <span class="route">{{ item.from }} → {{ item.to }}</span>
            <span class="time">{{ item.time }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue';

interface LogisticsItem {
  id: string;
  from: string;
  to: string;
  time: string;
  status: 'in-transit' | 'delivered' | 'pending';
  statusText: string;
}

const items = ref<LogisticsItem[]>([
  { id: 'LD2025010101', from: '北京', to: '上海', time: '08:24', status: 'in-transit', statusText: '运输中' },
  { id: 'LD2025010102', from: '广州', to: '成都', time: '08:15', status: 'in-transit', statusText: '运输中' },
  { id: 'LD2025010103', from: '上海', to: '哈尔滨', time: '07:52', status: 'delivered', statusText: '已送达' },
  { id: 'LD2025010104', from: '深圳', to: '乌鲁木齐', time: '07:36', status: 'in-transit', statusText: '运输中' },
  { id: 'LD2025010105', from: '郑州', to: '广州', time: '07:28', status: 'pending', statusText: '待发货' },
  { id: 'LD2025010106', from: '杭州', to: '西安', time: '07:15', status: 'in-transit', statusText: '运输中' },
  { id: 'LD2025010107', from: '南京', to: '昆明', time: '06:58', status: 'delivered', statusText: '已送达' },
  { id: 'LD2025010108', from: '武汉', to: '拉萨', time: '06:42', status: 'in-transit', statusText: '运输中' },
  { id: 'LD2025010109', from: '重庆', to: '北京', time: '06:30', status: 'pending', statusText: '待发货' },
  { id: 'LD2025010110', from: '天津', to: '大连', time: '06:15', status: 'in-transit', statusText: '运输中' }
]);

const currentIndex = ref(0);
const displayedItems = ref<LogisticsItem[]>([]);

// Initialize displayed items
const initializeItems = () => {
  displayedItems.value = [...items.value];
  // Duplicate items for seamless scrolling
  displayedItems.value = [...items.value, ...items.value];
};

let tickerInterval: number | null = null;

const startTicker = () => {
  tickerInterval = window.setInterval(() => {
    currentIndex.value++;
    if (currentIndex.value >= items.value.length) {
      currentIndex.value = 0;
    }
  }, 3000);
};

onMounted(() => {
  initializeItems();
  startTicker();
});

onBeforeUnmount(() => {
  if (tickerInterval) {
    clearInterval(tickerInterval);
  }
});
</script>

<style scoped>
.ticker-container {
  background: transparent;
  border-radius: 12px;
  padding: 20px;
  height: 100%;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(94, 115, 153, 0.3);
}

.section-title {
  color: #60a5fa;
  font-size: 18px;
  margin-bottom: 20px;
  font-weight: 600;
  text-shadow: 0 0 8px rgba(96, 165, 250, 0.5);
}

.ticker-wrapper {
  height: 240px;
  overflow: hidden;
  position: relative;
}

.ticker-content {
  transition: transform 0.5s ease-in-out;
}

.ticker-item {
  height: 60px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.ticker-item:last-child {
  border-bottom: none;
}

.item-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}

.item-id {
  font-weight: 600;
  color: #e2e8f0;
}

.item-status {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 500;
}

.item-status.in-transit {
  background: rgba(96, 165, 250, 0.2);
  color: #60a5fa;
}

.item-status.delivered {
  background: rgba(74, 222, 128, 0.2);
  color: #4ade80;
}

.item-status.pending {
  background: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
}

.item-details {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #94a3b8;
}

.route {
  font-weight: 500;
}

.time {
  font-weight: 500;
}
</style>